<template>
  <div class="deviceDetails">
    <div class="title">
      <div class="titleText">教室设备详情</div>
      <div class="close"></div>
    </div>
    <div class="content">
      <el-form :model="policysetForm"
               label-width="auto">
        <el-form-item label="策略名称">
          <el-input v-model="policysetForm.name"
                    placeholder="请输入"
                    class="name" />
        </el-form-item>
        <el-form-item label="策略方案">
          <span class="brief">请选择动作条件</span>
        </el-form-item>
        <el-form-item label=" ">
          <div class="actionCondition">
            <el-input v-model="policysetForm.content"
                      placeholder="请输入内容"
                      class="name" />
            <div class="connect">
              <el-icon>
                <Link />
              </el-icon>
            </div>
            <el-select v-model="policysetForm.selectValue"
                       placeholder="请选择"
                       class="m-2">
              <el-option v-for="item in conditionSelect"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value" />
            </el-select>
            <el-input v-model="policysetForm.smallContent"
                      placeholder="请输入内容"
                      class="smallName" />
            <div class="minus">
              <el-icon>
                <Plus />
              </el-icon>
            </div>
            <div class="minus">
              <el-icon color="#fff">
                <Minus />
              </el-icon>
            </div>
          </div>
        </el-form-item>
        <el-form-item label=" ">
          <span class="brief">选择执行动作（提示：以下动作将按顺序执行,请合理设置动作执行顺序）</span>
        </el-form-item>
        <el-form-item label=" ">
          <div class="plate">
            <el-select v-model="policysetForm.plateValue"
                       class="bigSelect"
                       placeholder="请选择">
              <el-option v-for="item in plateOptions"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value" />
            </el-select>
            <el-input v-model="policysetForm.plateInput"
                      placeholder="请输入内容"
                      class="plateInput" />
            <div class="plateMinus">
              <el-icon>
                <Plus />
              </el-icon>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="策略范围">
          <el-button size="14px">选择范围</el-button>
        </el-form-item>
        <el-form-item label=" ">
          <span class="brief">已选范围</span>
        </el-form-item>
        <el-form-item label=" ">
          <div class="scope"></div>
        </el-form-item>
        <el-form-item label="执行日期"><el-radio-group v-model="policysetForm.resource">
            <el-radio label="本日" />
            <el-radio label="本周" />
            <el-radio label="本月" />
            <el-radio label="本年" />
            <el-radio label="自定义" />
          </el-radio-group>
        </el-form-item>
        <!-- <el-form-item label="Activity zone">
          <el-select v-model="form.region" placeholder="please select your zone">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item> -->
        <el-form-item label=" ">
          <el-col :span="3"
                  class="text-center">
            <span class="text-gray-500 brief">日期区间:</span>
          </el-col>
          <el-col :span="10">
            <el-date-picker v-model="policysetForm.startTime"
                            type="date"
                            placeholder="开始日期" />

          </el-col>
          <el-col :span="1"
                  class="text-center">
            <span class="text-gray-500">至</span>
          </el-col>
          <el-col :span="10">
            <el-date-picker v-model="policysetForm.endTime"
                            type="date"
                            placeholder="结束日期" />
          </el-col>
        </el-form-item>

        <el-form-item label=" ">
          <el-checkbox-group v-model="policysetForm.type">
            <el-checkbox label="去除法定节假日"
                         class="brief"
                         name="type" />
            <el-checkbox label="去除周六"
                         class="brief"
                         name="type" />
            <el-checkbox label="去除周日"
                         class="brief"
                         name="type" />
            <el-checkbox label="保留法定节假日补班"
                         class="brief"
                         name="type" />
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="执行时段">
          <el-col :span="9">
            <el-date-picker v-model="policysetForm.startTimeFrame"
                            type="date"
                            placeholder="开始日期" />
          </el-col>
          <!-- <el-col :span="1"
                  class="text-center"></el-col> -->
          <el-col :span="9">
            <el-date-picker v-model="policysetForm.endTimeFrame"
                            type="date"
                            placeholder="结束日期" />
          </el-col>
          <el-col :span="6"
                  class="text-center"><el-button size="14">新增时段</el-button></el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="onSubmit">Create</el-button>
          <el-button>Cancel</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts" name="popUp">
import { ref } from 'vue'
const policysetForm = ref({
  name: '',
  content: '', // 动作条件 大输入框值
  smallContent: '', // 动作条件 小输入框值
  plateValue: '', // 班牌 select-value
  plateInput: '', // 班牌 input-value
  selectValue: '', // 策略方案 select
  region: '',
  startTime: '', // 开始时间
  endTime: '',
  type: [],
  resource: '',
  desc: '',
  startTimeFrame: '', // 执行时段
  endTimeFrame: '',
})
// 策略方案 小select
const conditionSelect = ref<Array<any>>([
  {
    value: '等于',
    label: '等于',
  },
  {
    value: '小于',
    label: '小于',
  },
  {
    value: '大于',
    label: '大于',
  },
])
// 电子班牌 options
const plateOptions = ref<Array<any>>([
  {
    value: '电子班牌控制（DZBP）',
    label: '电子班牌控制（DZBP）',
  },
  {
    value: '电子班牌控制（DZBP）',
    label: '电子班牌控制（DZBP）',
  },
  {
    value: '电子班牌控制（DZBP）',
    label: '电子班牌控制（DZBP）',
  },
])
const onSubmit = () => {
  console.log('submit!')
}
</script>

<style lang="scss" scoped>
@import './popUp.scss';
</style>
